<template>
	<!-- 学习统计 -->
	<view class="study-stats">
		<view class="stats-header">
			<text class="stats-title">📊 学习统计</text>
		</view>
		<view class="stats-grid">
			<view class="stat-item">
				<text class="stat-number">{{ userStats.totalCount }}</text>
				<text class="stat-label">测试次数</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ Math.round(userStats.averageScore) }}</text>
				<text class="stat-label">平均分数</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ userStats.bestScore }}</text>
				<text class="stat-label">最高分数</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ Math.round(userStats.averageAccuracy) }}%</text>
				<text class="stat-label">平均正确率</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue';
	import { getThemeStyles } from '@/stores/theme';
	import type { ExamStatistics } from '@/types';

	/**
	 * 组件属性
	 */
	interface Props {
		userStats: ExamStatistics;
	}

	const props = defineProps<Props>();

	// 获取主题样式
	const themeStyles = computed(() => getThemeStyles());
</script>

<style lang="scss" scoped>
	/**
	 * 学习统计样式
	 */
	.study-stats {
		margin-bottom: 32rpx;
	}

	.stats-header {
		margin-bottom: 20rpx;
	}

	.stats-title {
		font-size: 28rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		padding: 20rpx 12rpx;
		background: v-bind('themeStyles.bgSecondary');
		border: 1rpx solid v-bind('themeStyles.borderLight');
		border-radius: 12rpx;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: v-bind('themeStyles.hoverShadow');
		}
	}

	.stat-number {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');
		background: v-bind('themeStyles.primaryGradient');
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.stat-label {
		font-size: 20rpx;
		color: v-bind('themeStyles.textSecondary');
		text-align: center;
	}
</style>
